<template>
  <el-select
    clearable
    filterable
    v-bind="$attrs"
    @input="handleInput"
    allow-create
  >
    <el-option
      v-for="item in groupOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "DictionaryGroupSelect",
  inheritAttrs: true,
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      dictionaries: (state) => state.basic.dictionaries
    }),
    groupOptions() {
      let keys = Object.keys(this.dictionaries);
      return keys.map((key) => {
        return {
          label: key,
          value: key
        };
      });
    }
  },
  created() {
    this.loadDictionaries();
  },
  methods: {
    ...mapActions({
      loadDictionaries: "basic/loadDictionaries"
    }),
    handleInput(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
